<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人简介</title>
    <style>
        body{
            margin: 0;
            margin-bottom: 10px;
            /*background-color: #dcdfdf;     */
        }
        
        #yyy{
            height: 600px;
            /*background-color: mintcream;*/
            background-image: url(3.jpg);
            background-size: 100% 100%;
            /*background-position: 50% 50%;*/
            z-index: 10;
           

           
        }
        
        #sss{
            color: black;
            width: 1000px;
            margin: 0 auto;
        }
        
        p{
            font-size: 20px;
            text-indent: 2em;
        }
        
        h2{
            font-size: 30px;
        }
        
        .pic{
            width: 100%;
        }
        
        h3{
            font-size: 30px;
        }
        
        .png{
            width: 100%;
        }
        
        p{
            font-size: 20px;
            text-indent: 2em;
        }
        
        h1{
            color: yellowgreen;
            font-family: 楷体;
            text-align: center;
            font-size: 80px;
            padding-top: 400px;
        }
        
        a{
            color: yellowgreen;
        }
        
        h4{
            font-size: 30px;
        }
        
        h5{
            font-size: 30px;
        }
        
        #classmate{
            background-image: url(8.jpg);
             background-size: 100% 100%;   
             height: 500px;
             position: relative;
             
        }
        #classmate1{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50px;
            top: 200px;
            border-radius: 50%;

        }
        #classmate2{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 600px;
            top: 0;
            border-radius: 50%;


        }
        #classmate3{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 450px;
            top: 300px;
            border-radius: 50%;
        }
        #container{
            background-color: antiquewhite;
            height: 100px;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            /*text-align: left; */
            z-index: 2; 
            text-align: center;    
        }
        #container a{
            font-size: 30px;
            display: inline-block;
            text-decoration-line: none;       
        } 
    </style>
</head>

<body>

    <div id="container">
        <a href="#home">我的家乡——固始</a>
       <a href="#star">我的偶像——羽泉</a>
        <a href="#school">我的学校——黄科科技大学</a>
    </div>

    <div id="yyy">
        <h1>欢迎来到我的主页</h1>     
    </div>
    <div id="sss">
        <h2 id="home">
            <a href="http://www.gushiw.com/" target="_blank" style="text-decoration:none;">我的家乡——固始</a>
        </h2>


        <p>固始县名拜东汉 光武帝刘秀以“欲善其终，先固其始”之意涵命名。古称蓼县、蓼城、潘乡、寝丘、寝县，又因方言词汇“俏巴”最具特色，有“俏巴县”之称。简称“蓼”。 几千年来，当地人才辈出，楚国名相孙叔敖、五代闽国国王王审知、清代状元植物学名家吴其濬都是诞生于此。此外，固始县为河南省十个直管县市之一，除人事权外，享受省辖市权力权限，县委书记、县长高配为副厅级（2010年确定，2011年6月1日起实行省直管县体制）。</p>
        <img class="pic" src="5.jpg" alt="图片未加载成功">
        <hr>

        <h3 id="star">
            <a href="http://baike.baidu.com/link?url=7pHpyb1RqRlcdGEonS6Kmv-_CqO4zCLzMgdUst9PAyyfvzn8sF64ilojlFttguhbBIiG5rn8fiRzWPY4OGm4oV4souoVP6Ea-4pN3YWj7jy"
                target="_blank" style="text-decoration:none;">我的偶像——羽泉</a>

        </h3>
        <p>羽泉，中国内地组合，由陈羽凡和胡海泉组成。1998年11月17日，陈羽凡、胡海泉签约滚石唱片，宣告羽泉正式成立。1999年，推出首张创作专辑《最美》。2000年，发行专辑《冷酷到底》。2001年，发行专辑《热爱》。2009年，发行专辑《每个人心中都有一个羽泉》。2011年，发行专辑《@自己》。2013年4月12日，羽泉在湖南卫视主办的“我是歌手”节目中，获得冠军。2014年，发行专辑《敢爱》。2015年，加盟音乐节目《中国好歌曲》第二季，担任导师。2016年，羽泉加盟音乐节目《中国好歌曲》第三季，担任导师。</p>
        <img class="png" src="6.jpg" alt="图片未加载成功">
        <hr>

        <h4 id="school">
            <a href="http://snapshot.sogoucdn.com/websnapshot?ie=utf8&url=http%3A%2F%2Fwww.hhstu.edu.cn%2Fcontents%2F17%2F52.html&did=137aaf3f27ec65e8-2766c91869f561d9-1912602c61ec2e3141aeb257883e9a2c&k=9d896ff4af6044db3f596ce04204bfd8&encodedQuery=%E9%BB%84%E6%B2%B3%E7%A7%91%E6%8A%80%E5%A4%A7&query=%E9%BB%84%E6%B2%B3%E7%A7%91%E6%8A%80%E5%A4%A7&&hdq=sogou-site-706608cfdbcc1886-0001&duppid=1&cid=qb7.zhuye&w=01020400&m=0&st=1"
                target="_blank" style="text-decoration:none;">我的学校——黄科科技大学</a>

        </h4>
        <p>黄河科技学院位于中原历史文化名城——河南省郑州市。这里，北依滔滔黄河，南望巍巍嵩山，西接泱泱洛水，东临广袤的黄淮平原。这里，传八千年裴李岗圣火，承六千年大河村文化，诵五千年黄帝史诗，临三千六百年商城遗风。雄浑中原，弦歌不绝。</p>
        <img class="png" src="7.jpg" alt="图片未加载成功">
        <hr>

        <h5>我的同学</h5>
        <div id="classmate">
             <img  id="classmate1" src="9.jpg" alt="图片未加载成功">
             <img  id="classmate2" src="11.jpg" alt="图片未加载成功">
             <img  id="classmate3" src="pic.png" alt="图片未加载成功">
           
        </div>
    </div>




    <audio src="music.mp3" autoplay loop></audio>
</body>

</html>